<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>取色器</title>
    <style type="text/css">
        #bg_color {
            margin: 10px;
            width: 1500px;
            height: 200px;
            border: 2px solid #ccc;
            background-color: #c0dad4;
        }
    </style>
</head>
<body>
  <div id="bg_color">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
  </div>
  <div id="get_color" style="background-color:black;width: 180px;height:180px; border: 1px solid #ccc;margin:0
auto;"></div>

<script type="text/javascript">
    let get_color = document.getElementById("get_color");
    let children = document.getElementById("bg_color").children;
    let a = 30;
    let b = 5;
    let c = 15;

    for (let i = 0; i < children.length; i++) {
        children[i].style.width = '180px';
        children[i].style.height = '180px';
        children[i].style.border = '1px solid black';
        children[i].style.backgroundColor = 'rgb('+a*i+','+b*i+','+c*i+')';
        children[i].style.float = 'left';
        children[i].style.margin = '10px 15px';
        children[i].onclick = function () {
            get_color.style.backgroundColor= window.getComputedStyle(this, null).backgroundColor;
        };
    }

</script>
</body>
</html>
